<template>
  <div>
    <p>num：{{ num }}</p>
    <p>doubled：{{ doubled }}</p>
    <button @click="change1">更改num num.value = 'xxx'</button>
    <button @click="change2">更改num，触发视图更新 num.set('xxx', true)</button>
    <button @click="change3">更改num，不触发视图更新 num.set('xxx', false)</button>
    <button @click="change4">更改num，不触发视图更新 num.silentSet('xxx')</button>
    <button @click="change5">更改num，不触发视图更新 num.lay('xxx')</button>
  </div>
</template>

<script setup>
import { controlledRef } from '@vueuse/core';
import { computed, watchEffect } from 'vue';

let num = controlledRef(0);
const doubled = computed(() => num.value * 2);

console.log(num);

watchEffect(() => {
  // 会触发依赖收集
  console.log('watchEffect num.get()', num.get()); // num.get() === num.value
});

watchEffect(() => {
  // 不会触发依赖收集
  console.log('watchEffect num.get(false)', num.get(false)); // num.get() === num.value

  console.log();
});

watchEffect(() => {
  // 不会触发依赖收集 num.untrackedGet() === num.get(false)
  console.log('watchEffect num.untrackedGet()', num.untrackedGet());
});

watchEffect(() => {
  // num.peek() 返回num源的值 但是通过peek取值不会触发vue的依赖收集
  // num.peek() 等效于 num.get(false)和num.untrackedGet()
  console.log('watchEffect num peek', num.peek());
});

function change1() {
  num.value++;
}

function change2() {
  // num.set 默认第二个值默认为true
  num.set(num.value + 1, true); // 等效于 num.value++
}

function change3() {
  // num.set 只会对源进行修改 不会触发视图更新
  num.set(num.value + 1, false);

  /**
   * 两个别名函数 num.silentSet | num.lay
   * 以上两个函数是num.set('xxx', false)的别名函数，效果一致，与num.peek类似都是别名函数
   *
   * num.peek 取值时不触发依赖收集
   * num.silentSet | num.lay 修改时不会触发对应的watcher，进行不会进行视图更新
   */
}

const change4 = () => num.silentSet(num.value + 1);
const change5 = () => num.lay(num.value + 1);
</script>
